<template>
	<view v-if="userInfo && notice && notice.msg && notice.msg.length > 0" class="notice-bar">
		<view class="content flex flex-row align-c justify-b">
			<image class="icon1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/icon004.png')"></image>
			<view class="txt1 flex-sub txt-breakall txt-line1">{{ notice.msg }}</view>
			<view class="btn1 flex align-c justify-c flex-shrink" @click="goDetail">点击查看</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			notice: null
		};
	},
	computed: {
		...mapState({
			userInfo: ({ app }) => app.userInfo
		})
	},
	created() {
		const vm = this;

		vm.refresh();

		uni.$on('LOGIN_SUCCESS', vm.refresh);
	},
	destroyed() {
		const vm = this;

		uni.$off('LOGIN_SUCCESS', vm.refresh);
	},
	methods: {
		refresh() {
			const vm = this;

			// 如果已经登录了，且有权限查看月账单，则尝试获取首页月账单提示信息
			if (vm.userInfo && vm.userInfo.accessInfo && vm.userInfo.accessInfo.viewMonthBill && vm.userInfo.accessInfo.viewMonthBill != 101) {
				vm.$api
					.homeMonthBillNotice()
					.then(res => {
						if (res && res.data && res.data.notice && res.data.notice.landedId) {
							vm.notice = res.data.notice;
						} else {
							vm.notice = null;
						}
						vm.$forceUpdate();
					})
					.catch(error => {
						vm.notice = null;
						console.log('刷新首页月账单提示信息失败...', error);
					});
			}
		},
		goDetail() {
			const vm = this;
			vm.$utils.openPage(`/pkgMonthBill/pages/detail/index?landedId=${vm.notice.landedId}&year=${vm.notice.year}&month=${vm.notice.month}`);
		}
	}
};
</script>

<style scoped lang="scss">
.notice-bar {
	margin-top: 30rpx;
	padding: 0 30rpx;

	.content {
		height: 74rpx;
		background: #f5faff;
		border-radius: 12rpx;
		padding: 0 14rpx;

		.icon1 {
			width: 32rpx;
			height: 32rpx;
			display: block;
			margin-right: 14rpx;
		}

		.txt1 {
			font-size: 26rpx;
			color: #353535;
		}

		.btn1 {
			padding: 0 30rpx;
			margin-left: 14rpx;
			height: 48rpx;
			background: #3c93fe;
			border-radius: 24rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: #ffffff;
		}

		.btn1:active {
			opacity: 0.7;
		}
	}
}
</style>
